<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link th:href="@{/css/bootstrap.css}" rel='stylesheet' type='text/css' />
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<!-- Custom Theme files -->
	<link th:href="@{/css/style.css}" rel='stylesheet' type='text/css' />
	<!-- Custom Theme files -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!--webfont-->
	<script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/login.js}"></script>
	<script th:src="@{/js/jquery.easydropdown.js}"></script>
	<!--Animation-->
	<script th:src="@{/js/wow.min.js}"></script>
	<link th:href="@{/css/animate.css}" rel='stylesheet' type='text/css' />
	<link rel="stylesheet" th:href="@{/bower_components/font-awesome/css/font-awesome.min.css}">
	<!-- Ionicons -->
	<link rel="stylesheet" th:href="@{/bower_components/Ionicons/css/ionicons.min.css}">
	<!-- DataTables -->
	<link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}">
	<!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
	<link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}">
	<script>
        new WOW().init();
	</script>
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
		#l-map{height:850px;width:100%;margin:0;border:1px solid #0b58a2}
		#r-result{width:80%;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=pqkpFNNCDj0gnvM3TwU7kAthFcUmV9xc"></script>
	<title>地图搜索</title>
</head>
<body>
<div class="header">
	<div class="col-sm-8 header-left">
		<div class="logo">
			<a href="index.html"><img th:src="@{/images/logo.png}" alt=""/></a>
		</div>
		<div class="menu">
			<a class="toggleMenu" href="#"><img th:src="@{/images/nav.png}" alt="" /></a>
			<ul class="nav" id="nav">
				<li class="active"><a th:href="@{/toUserLogin}">首页</a></li>
				<li><a href="news.html">新闻</a></li>
				<li><a href="/userOrder/userorder">我的订单</a></li>
				<li><a th:href="@{/toGallery}">旗下酒店</a></li>
				<li><a th:href="@{/EditUser/findUserId}">个人中心</a></li>
				<li><a href="404.html">社区</a></li>
				<div class="clearfix"></div>
			</ul>
			<script type="text/javascript" th:src="@{/js/responsive-nav.js}"></script>
		</div>
		<!-- start search-->
		<div class="search-box">
			<div id="sb-search" class="sb-search">
				<form>
					<input class="sb-search-input" placeholder="请输入你要查询的关键字" type="search" name="search" id="search">
					<input class="sb-search-submit" type="submit" value="">
					<span class="sb-icon-search"> </span>
				</form>
			</div>
		</div>
		<!--search-scripts-->
		<script th:src="@{/js/classie.js}"></script>
		<script th:src="@{/js/uisearch.js}"></script>
		<script>
            new UISearch( document.getElementById( 'sb-search' ) );
		</script>
		<!--search-scripts-->
		<div class="clearfix"></div>
	</div>
	<div class="col-sm-4 header_right">
		<div id="loginContainer"><a href="#" id="loginButton"><img th:src="@{/images/login.png}">
			<span th:if="${session.user != null}" th:text="${session.user.userName}">登录</span>
			<span th:if="${session.user == null}" >登录</span>
		</a>
			<div id="loginBox">
				<form id="loginForm" th:action="@{/userLogin/login}" method="post">
					<fieldset id="body">
						<fieldset>
							<label for="userName">用户名</label>
							<input type="text" name="userName" id="userName">
						</fieldset>
						<fieldset>
							<label for="password">密码</label>
							<input type="password" name="userPassword" id="password">
						</fieldset>
						<input type="submit" id="login" value="登录">
						<input type="submit" id="regist" value="注册" ><a href="regist.html"></a>
						<label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住密码</i></label>
					</fieldset>
					<span><a href="#">忘记密码?</a></span>
				</form>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="clearfix"></div>
</div>

<div class="content_top">
	<div class="container">
		<div class="col-md-12 bottom_nav">
			<div class="content_menu">
				<ul>

				</ul>
			</div>
		</div>
	</div>
</div>
<center>
	<!--<hr>-->
	<div id="r-result"><b>请输入要搜索的地名:</b><input type="text" id="suggestId" size="25" value="百度" style="width:200px;" /></div>
	<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
	<!--<hr>-->
</center>
</div>
<!--<div class="content_middle">-->
	<!--<div class="container">-->
		<!--<div class="col-md-12">-->

		<!--</div>-->
	<!--</div>-->
<!--</div>-->
<center><div id="l-map"></div></center>


</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }
    var map = new BMap.Map("l-map");
    map.centerAndZoom("北京",12);// 初始化地图,设置城市和地图级别。
    map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
            ,"location" : map
        });
    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });
    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
    });
    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }
    /*浏览器定位*/
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            alert('您的位置：'+r.point.lng+','+r.point.lat);
        }
        else {
            alert('failed'+this.getStatus());
        }
    });
    /*IP定位*/
    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
        alert("当前定位城市:"+cityName);
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);

    //向地图中添加缩放控件
    map.addControl( new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_ZOOM}));
    //向地图中添加缩略图控件
    map.addControl( new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}));
    //向地图中添加比例尺控件
    map.addControl( new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}));
</script>
